<template>
<div  class="page-container-padding">
  <!-- 查询条件 -->
  <div style="display:flex;align-items:center;">
    <span>
      <el-date-picker
      style="width:220px;"
        v-model="dateRange"
        type="daterange"
        size="mini"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :clearable="false"
      >
      </el-date-picker>
    </span>
    <span style="margin-left:6px;">
      <el-select style="width:130px;" v-model="statisticsType" size="mini">
        <el-option :value="0" label="默认统计方式"></el-option>
        <el-option :value="1" label="小组统计方式"></el-option>
      </el-select>
    </span>
    <span style="margin-left:6px;"><el-button type="primary" size="mini" @click="dateRangeQuery">统计</el-button></span>
    <span style="margin-left:6px;"><el-button type="success" size="mini" @click="currentMonthQuery">计本月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="preMonthQuery">上一月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="nextMonthQuery">下一月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="yearQuery">全年</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="preYearQuery">上一年</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="nextYearQuery">下一年</el-button></span>
  </div>

  <!-- 显示数据 -->
  <div style="width:771px;margin-top:10px;">
    <div style="line-height: 22px;">非常规工作统计表 
      <el-popover
          placement="bottom-start"
          :width="600"
          :visible="visible"
        >
          <!-- 配置列面板 -->
          <transition name="fade">
            <div>
              <div>选择显示字段</div>
              <div>
                <el-checkbox v-model="showColumns.effective_count">有效量</el-checkbox>
                <el-checkbox v-model="showColumns.level_count">评级累计</el-checkbox>
                <el-checkbox v-model="showColumns.invalid_count">无效量</el-checkbox>
                <el-checkbox v-model="showColumns.lecture_count">路演数量</el-checkbox>
                <el-checkbox v-model="showColumns.lecture_level_count">路演评级</el-checkbox>
                <el-checkbox v-model="showColumns.total_count">总数量</el-checkbox>
              </div>
            </div>
          </transition>
          <template slot='reference'>
            <i class="el-icon-setting" style="font-size:18px; cursor: pointer" @click="visible = true"></i>
          </template>
      </el-popover>
    </div>
    <el-table border stripe :data="statisticsList">
      <el-table-column prop="admin_name" label="姓名" width="100px">
        <template slot-scope="scope">
          <span style="cursor:pointer;" @click="userCacheChange(scope.row)">{{ scope.row.admin_name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="total_count" label="总数量" width="110px" align="right" v-if="showColumns.total_count"></el-table-column>
      <el-table-column prop="effective_count" label="有效量" width="110px" align="right" v-if="showColumns.effective_count"></el-table-column>
      <el-table-column prop="level_count" label="评级累计" width="120px" align="right" v-if="showColumns.level_count"></el-table-column>
      <el-table-column prop="lecture_count" label="路演数量" width="110px" v-if="showColumns.lecture_count"></el-table-column>
      <el-table-column prop="lecture_level_count" label="路演评级" width="110px" v-if="showColumns.lecture_level_count"></el-table-column>
      <el-table-column prop="invalid_count" label="无效量" width="110px" align="right" v-if="showColumns.invalid_count"></el-table-column>
    </el-table>
    <div style="color:#F34D37;font-size:12px;margin-top:2px;">注：
      <br>1、统计表中的路演只包含路演模块中的营业部申请部分。
      <br>2、点击表中的用户名，可查看该人员的详细记录。
    </div>
  </div>

    <!-- 显示数据 -->
    <div style="margin-top: 10px">
      <div>工作详细记录(不含路演)</div>
      <el-table border stripe :data="recordsShowList">
        <el-table-column width="40">
          <template slot-scope="scope">
            <span v-if="scope.row.prse_id > 0">
              <el-popover
                trigger="hover"
                placement="right-start"
                :content="scope.row.prse_name"
              >
                <div slot="reference">
                  <vab-icon
                    :icon="['fas', 'handshake']"
                    style="cursor: pointer"
                  ></vab-icon>
                </div>
              </el-popover>
            </span>
          </template>
        </el-table-column>
      <el-table-column prop="create_date" label="日期" width="100px"></el-table-column>
      <el-table-column prop="admin_name" label="姓名" width="100px"></el-table-column>
      <el-table-column prop="title" label="标题" show-overflow-tooltip></el-table-column>
      <el-table-column prop="task_type_zh" label="工作类型" width="160px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="applicant" label="申请者" width="130px" align="right" show-overflow-tooltip></el-table-column>
      <el-table-column prop="level_flag" label="评级" width="70px" align="center"></el-table-column>
      <el-table-column label="附件" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.annex">
            <vab-icon :icon="['fas', 'download']" @click="toDownloadAnnex(scope.row)"></vab-icon>
            <span class="annex-file" @click="toPreview(scope.row)">{{ scope.row.annex }}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="swiss_coin" label="瑞币" width="100px" align="right"></el-table-column>
      <el-table-column label="操作" width="70px" align="center">
        <template slot-scope="scope">
          <i class="el-icon-delete-solid" style="color:#FF430D;cursor:pointer;" @click="toDeleteArticle(scope.row)">删除</i>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top:5px;"
      background
      layout="total, prev, pager, next, jumper"
      :current-page.sync="page"
      :page-size="pageSize"
      :total="totalCount"
      @current-change="currentPageChange">
    </el-pagination>
  </div>

  <!-- 预览弹窗 -->
  <el-dialog width="900px" top="15px" :visible.sync="showDocxView" v-if="showDocxView" title="文章预览">
    <div style="height:calc(100vh - 128px);overflow-y:auto;">
      <div ref="docFile"></div>
    </div>
  </el-dialog>
</div>
</template>

<script>
import { getMonthDatePoint, getYearDatePoint, datetimeToStr } from '@/utils/datetimeUtils'
import { getTaskStatistics, DeleteSpecialWork } from '@/api/departmentWork/specialTask'
import { getFileBlob, downloadFile } from '@/api/fileHandler'
export default {
  data(){
    return {
      visible:false,
      dateRange: [],
      statisticsType: 0,
      statisticsList: [],
      recordsCache: [],  // 存放统计表内的所有详情数据
      userRecordsCache: [],  // 当前点击的人员

      showFlag: 'total', // total or personal
      page: 1,
      pageSize:30,
      totalCount: 0,
      recordsShowList: [], // 当前显示的数据
      showDocxView: false,
      showColumns: {
        effective_count: true,
        level_count: true,
        invalid_count: true,
        lecture_count: true,
        lecture_level_count: true,
        total_count: true
      }
    }
  },
  mounted() {
    this.setCurrentDates()
    this.queryPageData()
  },
  methods:{
    setCurrentDates(){
      let flag = new Date().getDate() < 4 ? 'previous' : 'current'
      this.dateRange = getMonthDatePoint(new Date(), flag)
    },
    // 查询统计数据
    queryPageData(){
      const params = {
        start: datetimeToStr(this.dateRange[0], true, ''),
        end: datetimeToStr(this.dateRange[1], true, ''),
        st: this.statisticsType
      }
      this.pageDataLoading = true
      getTaskStatistics(params).then(res => {
        const data = res.data
        this.statisticsList = data.statistics
        this.recordsCache = data.records

        this.showFlag = 'total'
        this.totalCount = this.recordsCache.length
        this.page = 1
        this.showRecords(1)

        this.pageDataLoading = false
      }).catch(err => {
        this.pageDataLoading = false
      })
    },

    // 点击了统计表中的user
    userCacheChange(row){
      if (row.user_id == -1){
        this.userRecordsCache = this.recordsCache
      }else{
          this.userRecordsCache = this.recordsCache.filter(item => {
          return item.user_id === row.user_id
        })
      }
      this.showFlag = 'personal'
      this.totalCount = this.userRecordsCache.length
      this.page = 1
      this.showRecords(1)
    },

    currentPageChange(page){
      this.showRecords(page)
    },

    // 显示详情数据
    showRecords(page){
      const startIndex = (page-1)*this.pageSize
      if (this.showFlag === 'total'){
        this.recordsShowList = this.recordsCache.slice(startIndex, startIndex + this.pageSize)
      }else if (this.showFlag === 'personal'){
        this.recordsShowList = this.userRecordsCache.slice(startIndex, startIndex + this.pageSize)
      }
    },

    // 删除记录
    toDeleteArticle(row){
      this.$baseConfirm('确定删除这个记录吗?操作不可恢复!', '警告', () => {
        DeleteSpecialWork(row.id).then((res) => {
          this.$baseMessage(res.msg, 'success')
          this.queryPageData()
        })
      })
    },

    // 预览附件
    toPreview(row){
      if (row.annex_url.slice(-5) === '.docx'){
        this.showDocxView = true
        getFileBlob(row.annex_url).then(({data}) => {
          this.$docxView.renderAsync(data, this.$refs.docFile)
        })
      }else{
        this.toDownloadAnnex(row)
      }
    },

    // 下载附件
    toDownloadAnnex(row){
      if(!row.annex){return}
      downloadFile(row.annex_url)
    },

    // 指定日期范围查询
    dateRangeQuery(){
      this.queryPageData()
    },

    // 本月查询
    currentMonthQuery(){
      this.dateRange = getMonthDatePoint(new Date(), 'current')  // 当前月份
      this.queryPageData()
    },

    // 上一月查询
    preMonthQuery(){
      this.dateRange = getMonthDatePoint(this.dateRange[0], 'previous')
      this.queryPageData()
    },

    // 下一月查询
    nextMonthQuery(){
      this.dateRange = getMonthDatePoint(this.dateRange[0], 'next')
      this.queryPageData()
    },

    // 当前月份所在全年查询
    yearQuery(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'current')
      this.queryPageData()
    },

    // 上一年查询
    preYearQuery(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'previous')
      this.queryPageData()
    },

    // 下一年查询
    nextYearQuery(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'next')
      this.queryPageData()
    }
  }
}
</script>

<style scoped lang="scss">
.annex-file{
  color: #0073FC;
  cursor:pointer;
  margin-left:4px;
}
::v-deep {
  .docx-wrapper{
    background-color: #fefefe;
  }
}
.el-icon-setting{cursor: pointer;color: #0073FC;}
</style>
